<template>
    <div>
        <div class="Header">
            <a-input placeholder="请输入分类名称" v-model:value="InputText"></a-input>
            <a-button @click="Active(1)" :disabled="FlagAdd">添加商品</a-button>
            <a-button @click="Active(2)">查找商品</a-button>
            <span class="HeaderSpanText" v-if="FlagAdd">当前为搜索模式，搜索的内容是：</span>
            <span class="HeaderSpanContent" v-if="FlagAdd">{{ SpanText }}</span>
            <span v-if="FlagAdd">，</span>
            <span class="HeaderSpanNav" v-if="FlagAdd" @click="Cancel">点击取消搜索</span>
            <p class="HeaderP">ps：不支持模糊查找商品</p>
        </div>
        <div v-if="dataSource.length > 0">
            <!-- <a-button :disabled="FalgDelete"> 批量删除</a-button> -->
            <a-table :rowSelection="{ selectedRowKeys: selectedRowKey, onChange: selectedRowKeysChange }"
                :rowKey="(record) => record.classificationId" :dataSource="dataSource" :pagination="false" bordered>
                <a-table-column key="classificationId" title="分类id" data-index="classificationId" />
                <a-table-column key="classificationName" title="分类名称" data-index="classificationName" />
                <a-table-column key="classificationTime" title="创建时间" data-index="classificationTime" />
                <a-table-column title="操作">
                    <template #default="{ record }">
                        <a-button type="text" @click="DeleteClassId(record.classificationId)">删除</a-button>
                        <a-button type="text" style="margin-left:20px" @click="EditName(record)">修改</a-button>
                    </template>
                </a-table-column>
            </a-table>
            <div style="width:100%;text-align:center;margin:30px;paddint:30px;">
                <a-pagination v-model:current="page.pageIndex" v-model:pageSize="page.pageSize" :total="total"
                    show-less-items @change="PageChange" />
            </div>

        </div>
        <div v-else>
            <a-empty>
                <template #description>
                    <span>
                        暂无数据
                    </span>
                </template>
            </a-empty>
        </div>

        <!-- 弹窗 -->
        <div>
            <div class="Edit">
                <a-modal v-model:visible="visible" cancelText="取消" okText="提交" title="修改分类名称" @cancel="cancelEdit"
                    @ok="OKEdit">
                    <div class="EditBox">
                        <p class="EditBoxP">当前分类的名称为:<span class="EditBoxPSpan">{{ EditList.name }}</span></p>
                        <a-input placeholder="请输入新分类名" v-model:value="EditList.classificationName"></a-input>
                    </div>
                </a-modal>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { classificationLimit, classificationAdd, classificationSelectName, classificationUpdateName, DeleteClass } from "../../Axios/Admin";
import { Time } from "../../utils/Time";
import { message } from "ant-design-vue";
let dataSource = ref([{}])
let InputText = ref()
let FalgInput = ref(1)
let FalgDelete = ref(true)
let SpanText = ref("")
let visible = ref(false)
let pattern = ref(/^[\u4E00-\u9FA5A-Za-z]+$/)

let selectedRowKey = ref([])
let list = ref<any[]>([])
let FlagAdd = ref(false)
let EditList = ref({
    classificationId: "",
    classificationName: "",
    name: ""
})
// let columns = ref([{
//     title: "分类id",
//     dataIndex: "classificationId",
//     key: "classificationId"
// }, {
//     title: "分类名称",
//     dataIndex: "classificationName",
//     key: "classificationName"
// }, {
//     title: "创建时间",
//     dataIndex: "classificationTime",
//     key: "classificationTime"
// }])
let page = ref({
    "pageIndex": 1,
    "pageSize": 10
})
let total = ref(0)

onMounted(async () => {
    await init()

})
const PageChange = async (pagesIndex) => {
    page.value.pageIndex = pagesIndex
    await init()
}
const Active = async (num: number) => {

    if (FalgInput.value === 1) {
        FalgInput.value = 2
        if (InputText.value && InputText.value.trim() !== null) {
            if (num === 1) {
                if (pattern.value.test(InputText.value.trim())) {
                    const res = await classificationAdd({ classificationName: InputText.value.trim() })
                    // res.code === 200 ? message.success(res.message) : message.warn(res.message)
                    if (res.code === 200) {
                        init()
                        InputText.value = null
                    } else {
                        message.warn(res.message)
                    }
                } else {
                    message.warn("不能包含特殊字符及数字")
                }
            } else {
                const res = await classificationSelectName({ classificationName: InputText.value.trim() })
                // res.code === 200 ? null : 
                if (res.code === 200) {
                    FlagAdd.value = true
                    dataSource.value = []

                    dataSource.value.push(res.data)
                    SpanText.value = res.data.classificationName
                } else {
                    message.warn(res.message)
                }
                InputText.value = null
            }
        } else {
            message.warn("请在输入中输入内容后点击")
        }
        setTimeout(async () => {
            FalgInput.value = 1
        }, 2000)
    }
}
const Cancel = () => {
    FlagAdd.value = false
    init()
}
const selectedRowKeysChange = (selectedRowKeys, selectedRows) => {
    selectedRowKey.value = selectedRowKeys
    console.log(selectedRows);

    list.value = selectedRows
    if (list.value.length > 0) {
        FalgDelete.value = false
    } else {
        FalgDelete.value = true

    }

}
const DeleteClassId = async (id) => {
    // console.log(id);

    const res = await DeleteClass({ classificationId: id })

    if (res.code == 200) {
        await init()
        message.success(res.message)
    } else {
        message.warning(res.message)
    }
}
const EditName = (value) => {
    EditList.value.classificationId = value.classificationId
    // EditList.value.classificationName = value.classificationName
    EditList.value.name = value.classificationName
    visible.value = true
}
const OKEdit = async () => {
    if (EditList.value.classificationName.trim() != "") {
        if (pattern.value.test(EditList.value.classificationName.trim())) {

            const res = await classificationUpdateName(EditList)
            if (res) {
                if (res.code === 200) {
                    message.success(res.message)
                    await init()
                    visible.value = false
                    EditList.value = {
                        classificationId: "",
                        classificationName: "",
                        name: ""
                    }

                } else {
                    message.warn(res.message)

                }
            }
        } else {
            message.warn("不能包含特殊字符及数字")

        }
    } else {
        message.warn("请输入内容后在提交")
    }
}
const cancelEdit = () => {
    visible.value = false
    EditList.value = {
        classificationId: "",
        classificationName: "",
        name: ""
    }
}

const init = async () => {
    const res = await classificationLimit(page)
    if (res && res.code == 200) {
        if (res.data.Data) {
            res.data.Data.forEach(el => {
                el.classificationTime = Time(el.classificationTime)
            })

            dataSource.value = res.data.Data
            total.value = res.data.total
        }

    }
}
</script>

<style lang="scss" scoped>
.Header {
    margin-bottom: 40px;

    .ant-input {
        width: 200px;

    }

    .ant-btn {
        margin-left: 20px;
    }

    .HeaderP {
        margin-top: 4px;
        color: red;
        font-size: 12px;
    }

    .HeaderSpanContent {
        margin-right: 6px;
        color: red;

    }

    .HeaderSpanText {
        margin-left: 20px;

    }

    .HeaderSpanNav {
        cursor: pointer;
        color: #280df7;
    }
}


.EditBox {
    .EditBoxP {

        .EditBoxPSpan {
            color: red;
        }
    }
}
</style>